Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page
//App.js File
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
// import ReactDOM from "react-dom";
const App = () => {
return (
<Router >
<Routes>
<Route path="/" component={ Home }></Route>
</Routes>
</Router>
)
}
export default App;
**My any react router related code not working i don't know why it happend when i start insert some route in program so it show this error **
Firstly please check your react-router-dom version from the package.json file.If it is above version 6 you should want do it like this.
import './App.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from './pages/Home';
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
</Router>
</div>
);
}
export default App;
In V6, you can't use the component prop anymore. It was replaced in favor of element:
<Route path="/" element={<Home />}></Route>
More info in the migration doc.
Very simple:
<Route path="/" component={ <Home/> } />
I had the same problem. Replace component with element and it worked.
Replace this:
<Route path="/" component={HomePage} exact />
with this:
<Route path="/" element={<HomePage/>} exact />
in version 6:
component replaced with element and needs to close "</Route>"
<Route exact path="/" element={<AddTutorial />}></Route>
In V6, you can not use the component prop anymore. It must replaced for element
import './App.css';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from './pages/Home';
function App() {
return
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Home />}></Route>
</Routes>
</Router>
</div>;
}
export default App;
I had the same error however my fix was slightly different I had spelled element wrong.
<Route exact path='/MyGames' elemtent={<MyGames/>}/>
and this was the error it gave me in the browser console
Matched leaf route at location "/MyGames" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.
If you're using react-router-dom 6 or above, you may have a routes array that includes parent and child routes. You may then try to open a route such as
/portal
and get this error because that component corresponds to a child route
/:customerid/portal
but you haven't read your routes (and their child routes) closely enough to see that.
This is a common problem if you are using react-router-dom V6 To solve this it's simple
In your code Replace component with element Replace {home} with {}
This becomes... <Route path="/" element={}>
This will definitely solve the problem.